<template>
    <div>
        <el-dialog title="撤销纪律处分" :visible.sync="dialogVisible" width='450px' append-to-body v-dialogDrag :close-on-click-modal="false" >
            <div>
                <el-form ref="rowdata" :model="rowdata" label-width="100px" class="personeditform" :rules="rules" status-icon>
                    <el-form-item label="年份" >
                        <el-input v-model="rowdata.year" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" >
                        <el-input v-model="rowdata.name" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" >
                        <el-input v-model="rowdata.personid" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="rowid" >
                        <el-input v-model="rowdata.rowid" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="处分时间" >
                        <el-input v-model="rowdata.cftime" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="撤销时间" prop="cxcftime"> 
                        <el-date-picker v-model="rowdata.cxcftime" style="width: 80%;" type="date" placeholder="" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="撤销原因" prop="cxcfreason" >
                        <el-input v-model="rowdata.cxcfreason" style="width: 80%;" ></el-input>
                    </el-form-item>
                    <el-form-item label="撤销文件" prop="content">
                        <el-input placeholder="请选择文件" v-model="rowdata.content" :disabled="true">
                            <template slot="append">
                                <el-button type="primary" @click="clickfile">选择</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="状态信息">
                        <span >{{status}}</span>
                    </el-form-item>
                </el-form>
                <el-row style="position: relative;width: 100%;">
                    <el-button style="margin: 0 auto;display: block;"  type="primary" @click="checksubmit('rowdata')">确定并保存<i class="el-icon-upload el-icon--right" ></i></el-button>
                </el-row>
                <input type="file" id="inputfile" style="display: none;" ref="inputfile" @change="changefile">
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        data() {
            return { 
                dialogVisible: false, 
                rowdata:{
                    year:'',
                    name:'',
                    personid:'',
                    rowid:'',
                    cftime:'',

                    cxcfreason:'',
                    cxcftime:'',
                    cxcfile:'',
                    content:'',


                },
                files:[],
                rules: {
                    cxcfreason: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    cxcftime: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    content: [{ required: true, message: '不能为空', trigger: 'blur' }],
                },
                status:'',
            };
            
        },
        mounted() {
            
        },
        components: {},
        watch: {
            dialogVisible: function (n) {
                if (n == true) {
                    this.rowdata.cxcfreason='';
                    this.rowdata.cxcftime='';
                    this.rowdata.content='';
                    this.status=''
                }
            },
        },
        methods: {
            ...mapActions(['GetZbById']),
            clickfile(){
                let _this=this;
                setTimeout(function(){
                    _this.$refs.inputfile.click();
                },50)
            },
            changefile(event){
                this.files=[];
                for (let index = 0; index < event.srcElement.files.length; index++) {
                    const element = event.srcElement.files[index];
                    this.files.push(element);
                }
                if(this.files.length==1){
                    this.rowdata.content=this.files[0].name;
                }
                var inputfile = document.getElementById('inputfile');
                inputfile.value = ''; 
            },
            uploadFile(){
                this.status='正在上传处理文件...'
                this.$upload.set_options({
                    file:this.files,
                    action:this.$Common.Config.url,
                    data:{
                        type:'uploadfile',
					    token:this.$Common.GetStorage('token')
                    },
                    onProgress:this.onProgress,
                    onSuccess:this.onSuccess,
                    onError:this.onError,
                })
            },
            onProgress(value,index,length){
                this.percentage=value;
            },
            onSuccess(filename){
                if(filename.length==1){
                    this.rowdata.cxcfile=filename[0];
                }
                this.status='正在写入数据库...'
                this.uploadAjax();
            },
            onError(message){
                this.$message({
                    message:message,
                    type:'error'
                });
                this.status='上传处理文件失败...'
            },
            checksubmit(formName){
                this.status=''
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.uploadFile();
                    } 
                    else {
                        this.$message("请填写必要信息");
                        return false;
                    }
                });
            },
            uploadAjax(){
                let _this=this;
                let postdata={
                    type:"updatejlcf_chexiao",
                    split:JSON.stringify(this.rowdata)
                }
                this.$Common.AjaxPost(postdata,true)
                .then(function(e){
                    _this.$message("操作成功");
                    _this.dialogVisible=false;
                    _this.$emit('editResult');
                },function(){
                     _this.$message("操作失败");
                })
                .catch(function(reason) {
                    console.log('catch:', reason);
                });
            },
        },
    }
</script>


